<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
        <meta content="yes" name="apple-mobile-web-app-capable">
        <!-- 全屏显示-->
        <meta name="apple-touch-fullscreen" content="yes">
        <!-- 不要让设备识别电话号码和邮箱地址-->
        <meta content="telephone=no,email=no" name="format-detection">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
        <!-- DNS预解析-->
        <meta http-equiv="x-dns-prefetch-control" content="on">

        <link href="../css/common/mui.min.css" rel="stylesheet">
        <link href="../css/common/reset.css" rel="stylesheet">
        <link href="../css/common/common.css" rel="stylesheet">
        <link href="../css/animate.css" rel="stylesheet">
        <link href="../css/index.css" rel="stylesheet">
        
        <script src="../js/zepto-1.1.4.min.js"></script>
        <script src="../js/mui.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js"></script>
        
        <title>考试成绩</title>
    
    </head>
    <body>
        <div class="index">
            <div class="header">hi, Nassua</div>
            <div class="content plan">
                <!-- 轮播 -->
                <div class="mui-slider">
                    <div class="mui-slider-group">
                        <!-- 规划完成情况 -->
                        <div class="mui-slider-item">
                            <div class="tit">
                                <h3>规划完成情况</h3>
                                <a href="javascript: ">查看详情</a>
                            </div>
                            <div class="wapper plan-info">
                                <div class="wapper-item">
                                    <label>华北区</label>
                                    <div class="progress"><i style="width: 80%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>华北区</label>
                                    <div class="progress"><i style="width: 50%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>华东区</label>
                                    <div class="progress"><i style="width: 70%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>华南区</label>
                                    <div class="progress"><i style="width: 30%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>中部区</label>
                                    <div class="progress"><i style="width: 100%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>西北区</label>
                                    <div class="progress"><i style="width: 80%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>西区</label>
                                    <div class="progress"><i style="width: 90%"></i></i></div>
                                </div>
                            </div>
                        </div> 
                        <!-- 考试人员覆盖率 -->
                        <div class="mui-slider-item">
                            <div class="tit">
                                <h3>考试人员覆盖率</h3>
                                <a href="javascript: ">查看详情</a>
                            </div>
                            <div class="wapper examiner">
                                <div class="wapper-item">
                                    <label>华北区</label>
                                    <span>80</span>
                                    <div class="progress"><i style="width: 80%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>华北区</label>
                                    <span>50</span>
                                    <div class="progress"><i style="width: 50%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>华东区</label>
                                    <span>70</span>
                                    <div class="progress"><i style="width: 70%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>华南区</label>
                                    <span>30</span>
                                    <div class="progress"><i style="width: 30%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>中部区</label>
                                    <span>100</span>
                                    <div class="progress"><i style="width: 100%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>西北区</label>
                                    <span>80</span>
                                    <div class="progress"><i style="width: 80%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>西区</label>
                                    <span>90</span>
                                    <div class="progress"><i style="width: 90%"></i></i></div>
                                </div>
                                <div class="label-tit">完成考试人数</div>
                            </div>
                        </div>
                        <!-- 考试成绩统计 -->
                        <div class="mui-slider-item">
                            <div class="tit">
                                <h3>考试成绩统计</h3>
                                <a href="javascript: ">查看详情</a>
                            </div>
                            <div class="wapper exam-score">
                                <div class="wapper-item">
                                    <label>华北区</label>
                                    <div class="progress">
                                        <i style="width: 50%"></i>
                                        <span style="left: 50%">50</span>
                                    </div>
                                </div>
                                <div class="wapper-item">
                                    <label>华北区</label>
                                    <div class="progress">
                                        <i style="width: 30%"></i>
                                        <span class="min" style="left: 30%">30</span>
                                    </div>
                                </div>
                                <div class="wapper-item">
                                    <label>华东区</label>
                                    <div class="progress">
                                        <i style="width: 80%"></i>
                                        <span style="left: 80%">80</span>
                                    </div>
                                </div>
                                <div class="wapper-item">
                                    <label>华南区</label>
                                    <div class="progress">
                                        <i style="width: 100%"></i>
                                        <span style="left: 100%">100</span>
                                    </div>
                                </div>
                                <div class="wapper-item">
                                    <label>中部区</label>
                                    <div class="progress">
                                        <i style="width: 70%"></i>
                                        <span style="left: 70%">80</span>
                                    </div>
                                </div>
                                <div class="wapper-item">
                                    <label>西北区</label>
                                    <div class="progress">
                                        <i style="width: 50%"></i>
                                        <span style="left: 50%">50</span>
                                    </div>
                                </div>
                                <div class="wapper-item">
                                    <label>西区</label>
                                    <div class="progress">
                                        <i style="width: 80%"></i>
                                        <span style="left: 80%">80</span>
                                    </div>
                                </div>
                            </div>
                            <div class="average">
                                <label></label>
                                <div>
                                    <i style="left: 90%"></i>
                                    <span style="left: 90%">全国平均分：90</span>
                                </div>
                            </div>
                        </div>
                        <!-- 雷达图 -->
                        <div class="mui-slider-item">
                            <div class="tit">
                                <h3>考试成绩统计</h3>
                                <a href="javascript: ">查看详情</a>
                            </div>
                            <div id="echarts" style="width: 100%; height: 6rem"></div>
                            <ul class="echart-label">
                                <li>
                                    <i></i>
                                    <div>Leuxs中国</div>
                                </li>
                                <li>
                                    <i></i>
                                    <div>华北一区</div>
                                </li>
                                <li>
                                    <i></i>
                                    <div>华北二区</div>
                                </li>
                                <li>
                                    <i></i>
                                    <div>华东一区</div>
                                </li>
                                <li>
                                    <i></i>
                                    <div>华南一区</div>
                                </li>
                                <li>
                                    <i></i>
                                    <div>华南二区</div>
                                </li>
                            </ul>
                        </div>
                        <!-- 培训完成情况 -->
                        <div class="mui-slider-item">
                            <div class="tit">
                                <h3>培训完成情况</h3>
                                <a href="javascript: ">查看详情</a>
                            </div>
                            <div class="wapper train-info">
                                <div class="wapper-item">
                                    <label>华北区</label>
                                    <div class="progress"><i style="width: 80%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>华北区</label>
                                    <div class="progress"><i style="width: 50%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>华东区</label>
                                    <div class="progress"><i style="width: 70%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>华南区</label>
                                    <div class="progress"><i style="width: 30%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>中部区</label>
                                    <div class="progress"><i style="width: 100%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>西北区</label>
                                    <div class="progress"><i style="width: 80%"></i></div>
                                </div>
                                <div class="wapper-item">
                                    <label>西区</label>
                                    <div class="progress"><i style="width: 90%"></i></i></div>
                                </div>
                            </div>
                        </div> 
                    </div>
                    <!-- 指示器 -->
                    <div class="mui-slider-indicator">
                        <div class="mui-indicator mui-active"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="btn-wrap">
                    <a href="javascript: ">
                        <img src="../img/fqcc.png" alt="" />
                        <label>发起抽查</label>
                    </a>
                    <a href="javascript: ">
                        <img src="../img/wdcc.png" alt="" />
                        <label>我的抽查</label>
                    </a>
                </div>
            </div>
        </div>
        <script src="../js/remset.js"></script>
        <script src="../js/index.js"></script>
    </body>
</html>